<template>
  <div id="popupbody" v-if="dialogVisible">
    <div class="popupbody-box">
      <div class="popupbody-title">
        <span>【{{ showTeacherOption ? showTeacherOption.realname : '' }}】巡班明细</span>
        <span class="el-icon-close" @click="closePOpup"></span>
      </div>
      <div class="popupbody-boxin" style="padding:10px;">
        <el-tabs v-model="activeName" type="card">
          <el-tab-pane :label="item.name" :name="item.id" v-for="item in activelist" :key="item.id"></el-tab-pane>
        </el-tabs>
        <el-table :data="arryList"
                  height="400"
                  :stripe="tableStyle.tableStripe"
                  :border="tableStyle.tableBorder"
                  tooltip-effect="dark"
                  ref="table">
          <el-table-column label="巡班班级" align="center">
            <template slot-scope="scope">
              {{scope.row.classes?scope.row.classes.class_name:''}}
            </template>
          </el-table-column>
          <el-table-column label="巡班时间" prop="create_time" align="center"></el-table-column>
          <el-table-column label="巡班对象" align="center">
            <template slot-scope="scope">
              {{ userList[scope.row.type].name }}
            </template>
          </el-table-column>
          <el-table-column label="巡班意见" align="center" prop="remark">
          </el-table-column>
          <el-table-column label="星数" align="center">
            <template slot-scope="scope">
              <el-popover
                  placement="left-start"
                  title="评分明细"
                  width="450"
                  trigger="hover">
                <div class="tableline">
                  <div class="Patrol-list" v-for="(item_, index) in scope.row.list" :key="index">
                    <span>【{{ item_.parent_name }}】{{ item_.name }}</span>
                    <span>{{ item_.score }}星</span>
                  </div>
                </div>
                <span slot="reference" class="tablelineBtn"><el-tag>{{ scope.row.score }}</el-tag></span>
              </el-popover>
            </template>
          </el-table-column>
        </el-table>
        <el-col :span="24" class="toolbar">
          <el-pagination
              background
              layout="total, prev, pager, next"
              :total="page.total"
              :page-size="page.pagesize"
              @current-change="handleSizeChange">
          </el-pagination>
        </el-col>
      </div>
      <div class="popupbody-footer">
        <el-button size="small" @click="closePOpup">返回</el-button>
        <downexcel type="trainingUserDay" :option="{user_id: showTeacherOption.id, day:dayTime, style: this.activeName}"
                   :excelName="excelNameFn()"></downexcel>
      </div>
    </div>
  </div>
</template>

<script>
import {tableoption, pagination} from '@/utils/util.js'
import {patrol_sign_index} from "@/api/admin/ClassDynamics"

export default {
  name: 'studentMultiple',
  props: ['visible', 'trainList', 'showTeacherOption', 'dayTime'],
  data() {
    return {
      dialogVisible: this.visible,
      // 设置table样式
      tableStyle: tableoption,
      arryList: [],
      // 设置table页面分页所需
      page: {
        pageindex: pagination.pageIndex,
        pagesize: pagination.pageSize,
        total: pagination.total
      },
      userList: {
        1: {
          name: '幼儿',
          id: 1
        },
        2: {
          name: '教师',
          id: 2
        },
        4: {
          name: '生活老师',
          id: 4
        },
        3: {
          name: '场地',
          id: 3
        }
      },
      activeName: '1',
      activelist: [
        {
          name: '当天巡班',
          id: '1'
        },
        {name: '当月巡班', id: '2'},
        {
          name: '当期巡班',
          id: '3'
        },
      ]
    }
  },
  watch: {
    visible() {
      this.dialogVisible = this.visible
      if (this.visible) {
        this.getData()
      }else{
        this.activeName = '1'
        this.arryList = []
      }
    },
    activeName(){
      if(this.visible){
        this.page.pageindex = 1
        this.getData()
      }
    }
  },
  created() {
  },
  methods: {
    getData(){
      let data_ = {
        p: this.page.pageindex,
        style: this.activeName,
        user_id: this.showTeacherOption.id
      }
      patrol_sign_index(data_).then(res => {
        console.log('p:', res)
        for(let item of res.list.data){
          item.list = JSON.parse(item.list)
        }
        this.arryList = res.list.data
        this.page.total = res.list.total
      })
    },
    // 分页
    handleSizeChange(val) {
      this.page.pageindex = val
      this.getData()
    },
    // 关闭弹窗
    closePOpup() {
      this.$emit('update:visible', false)
    },
    excelNameFn() {
      if(Number(this.activeName)===1){
        return `${this.showTeacherOption.realname}${this.dayTime}`
      }
      if(Number(this.activeName)===2){
        return `${this.showTeacherOption.realname}-当月`
      }
      if(Number(this.activeName)===3){
        return `${this.showTeacherOption.realname}-当期`
      }
    }
  },
  mounted() {
  }
}
</script>
<style scoped>
</style>
